<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic EasyLoader - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../easyloader.js"></script>
</head>
<body>
<h2>Basic EasyLoader</h2>
<div class="demo-info">
    <div class="demo-tip icon-tip"></div>
    <div>Click the buttons below to load components dynamically.</div>
</div>
<div style="margin:10px 0;">
    <a href="#" class="easyui-linkbutton" onclick="load1()">Load Calendar</a>
    <a href="#" class="easyui-linkbutton" onclick="load2()">Load Dialog</a>
    <a href="#" class="easyui-linkbutton" onclick="load3()">Load DataGrid</a>
</div>
<div id="cc"></div>
<div id="dd"></div>
<table id="tt"></table>
<script type="text/javascript" src="../../easyloader.js"></script>
<script>
    function load1() {
        using('calendar', function () {
            $('#cc').calendar({
                width: 180,
                height: 180
            });
        });
    }
    function load2() {
        using(['dialog', 'messager'], function () {
            $('#dd').dialog({
                title: 'Dialog',
                width: 300,
                height: 200
            });
            $.messager.show({
                title: 'info',
                msg: 'dialog created'
            });
        });
    }
    function load3() {
        using('datagrid', function () {
            $('#tt').datagrid({
                title: 'DataGrid',
                width: 300,
                height: 200,
                fitColumns: true,
                columns: [[
                    {field: 'productid', title: 'Product ID', width: 100},
                    {field: 'productname', title: 'Product Name', width: 200}
                ]],
                data: [
                    {"productid": "FI-SW-01", "productname": "Koi"},
                    {"productid": "K9-DL-01", "productname": "Dalmation"},
                    {"productid": "RP-SN-01", "productname": "Rattlesnake"},
                    {"productid": "RP-LI-02", "productname": "Iguana"},
                    {"productid": "FL-DSH-01", "productname": "Manx"},
                    {"productid": "FL-DLH-02", "productname": "Persian"},
                    {"productid": "AV-CB-01", "productname": "Amazon Parrot"}
                ]
            });
        });
    }
</script>

</body>
</html>